<template>
  <div class="login-box">
    <div class="box">
        <el-form ref="elForm" :model="form" label-width="0px" :rules="rules" >
            <section class="login-content">
                <div class="left">
                    <div class="left-img">
                        <img src="../../assets/jellyfish.png"/>
                    </div>
                </div>
                <div class="right">
                    <h2 class="right-box">心理测试管理后台</h2>
                    <el-form-item prop="mobile">
                        <el-input maxlength="11" autocomplete="on" v-model="form.mobile" prefix-icon="el-icon-mobile-phone" placeholder="手机号" />
                    </el-form-item>
                    <el-form-item prop="pwd">
                        <el-input maxlength="50" autocomplete="on" v-model="form.pwd" placeholder="密码" prefix-icon="el-icon-key" show-password/>
                    </el-form-item>
                    <el-form-item label-width="0px">
                        <div class="btn-center">
                            <el-button type="primary" @click="clickLogin" :loading="loading">登录</el-button>
                        </div>
                    </el-form-item>
                </div>
            
            </section>
        </el-form>   
    </div>
    
  </div>
</template>

<script lang="ts">
import { defineComponent,reactive, getCurrentInstance,ref } from 'vue';
export default defineComponent({
    name:'Login',
    setup(){
        const setform: any = ref(null);
        const loading = ref(false);
        const instance: any = getCurrentInstance();
        const GL = instance.appContext.config.globalProperties;
        const form = localStorage.PW ? JSON.parse(localStorage.PW) :
        {
            mobile:'',
            pwd:''
        }
        const elForm: any = ref(null);
        const errorMsg = ref('');
        const rules = {
            mobile: [
                {
                    validator: (rule: any, value: any, callback: any) => {
                        if (value === '') {
                            callback(new Error('请输入手机号'));
                        } else if (!/^1\d{10}$/.test(value)) {
                            callback(new Error('请输入正确的11位手机号'));
                        } else {
                            callback();
                        }
                    },
                    trigger: 'blur'
                }
            ],
            pwd: [
                {
                    validator: (rule: any, value: any, callback: any) => {
                        if (value === '') {
                            callback(new Error('请输入密码'));
                        } else if (value.length < 5) {
                            callback(new Error('密码大于5位数'));
                        } else {
                            callback();
                        }
                    },
                    trigger: 'blur'
                }
            ]
        };
        const clickLogin = () => {
            elForm.value.validate((valid: boolean) => {
                if (valid) {
                    loginPost()
                }
            });
        }
        const loginPost = async() =>{
            loading.value = true;
            await GL.$axios.post(GL.$api.admin.login,form).then((res: any) => {
                if(res.code !== 0) return
                const token = res.data.token
                localStorage.setItem('TOKEN',token);
                localStorage.setItem('PW',JSON.stringify(form))
                GL.$axios.defaults.headers.common = {
                    ...GL.$axios.defaults.headers.common,
                    Authorization: token
                }
                loading.value = false
                GL.$router.replace({
                    name: 'MActivity'
                });
            }).catch((e: any) => {
                loading.value = false;
                    errorMsg.value = e.data
                        ? e.data.msg
                        : '服务器发生错误,请稍后再试';
            });
        }
        return {
            ...reactive({form,rules}),
            loading,
            clickLogin,
            elForm,
            errorMsg
        }
    }
});
</script>


<style lang="scss" scoped>
@import 'index.scss';
</style>